<%@page import="com.argticling.service.ArticleService"%>
<%@page import="com.argticling.model.Article"%>
<%@page import="java.util.List"%><div id="wrapper"> 
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

	<div id="mask"> 
		<div id="item1" class="item">
		<a class="layout_button_back layout_button" href="#item3" ><img src="/images/prev_arrow.jpg" alt="Previous Arrow"/></a>
		<a class="layout_button_next layout_button" href="#item2" ><img src="/images/next_arrow.jpg" alt="Next Arrow"/></a> 			
			<div class="content">
				<div class="articulos">
					<c:forEach var="article" items="${articles}"  begin="0" end="3" step="1">
						<div class="recommendatedArticleHome">
							<a href="/article/read/${article.id}"><span class="recomArticleTitle">${article.dc.title}</span></a>
							<span class="recomArticleAbstract">${article.dc.description}</span>
						</div>
					</c:forEach>
				</div>
			</div>
		</div>
		
		<div id="item2" class="item">
		<a class="layout_button_back layout_button" href="#item1" ><img src="/images/prev_arrow.jpg" alt="Previous Arrow"/></a> 			               		
		<a class="layout_button_next layout_button" href="#item3" ><img src="/images/next_arrow.jpg" alt="Next Arrow"/></a> 			
			<div class="content">
					<c:forEach items="${articles}" var="article" begin="4" end="7" step="1" varStatus ="status">
					<div class="recommendatedArticleHome">
						<a href="/article/read/${article.id}"><span class="recomArticleTitle">${article.dc.title}</span></a>
						<span class="recomArticleAbstract">${article.dc.description}</span>
					</div>
				</c:forEach>
			</div>
		</div>
				
		<div id="item3" class="item">
			<a class="layout_button_back layout_button" href="#item2" ><img src="/images/prev_arrow.jpg" alt="Previous Arrow"/></a> 			               		
			<a class="layout_button_next layout_button" href="#item1" ><img src="/images/next_arrow.jpg" alt="Next Arrow"/></a> 			
			<div class="content">
					<c:forEach items="${articles}" var="article" begin="8" end="11" step="1" varStatus ="status">
					<div class="recommendatedArticleHome">
						<a href="/article/read/${article.id}"><span class="recomArticleTitle">${article.dc.title}</span></a>
						<span class="recomArticleAbstract">${article.dc.description}</span>
					</div>
				</c:forEach>
			
			</div>
		</div>
	</div>
</div> 